<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <h1 style="margin-left: 18px; color: #909399">以下是管理员信息</h1>
        <el-table style="width: 100%" :data="tableData" @cell-dblclick="handle">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="昵称" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
              <div v-else>
                <el-input v-model="scope.row.name"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="账户名" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.account }}</div>
              <div v-else>
                <el-input v-model="scope.row.account"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="password" label="密码" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.isEdit">{{ scope.row.password }}</div>
              <div v-else>
                <el-input v-model="scope.row.password"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="按钮">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)">{{
                scope.row.isEdit ? "完成" : "编辑"
              }}</el-button>
              <el-button @click="deleteUser(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="添加管理员" name="second">
        <h1 style="margin-left: 18px; color: #909399">添加其他管理员</h1>
        <el-form
          class="register"
          :model="form"
          style="width: 600px"
          :rules="rules"
          ref="form"
        >
          <el-form-item prop="name">
            <el-input placeholder="请输入昵称" v-model="form.name" />
          </el-form-item>
          <el-form-item prop="user">
            <el-input placeholder="请输入用户名" v-model="form.user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="form.password"
              show-password
            />
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              placeholder="确认密码"
              v-model="form.password2"
              show-password
            />
          </el-form-item>
          <el-form-item prop="phone">
            <el-input placeholder="请输入手机号" v-model="form.phone" />
          </el-form-item>
          <el-form-item prop="email">
            <el-input placeholder="请输入邮箱" v-model="form.email" />
          </el-form-item>
          <el-form-item>
            <el-button @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    var checkPassword2 = (rule, value, callback) => {
      if (value != this.form.password) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      data: null,
      activeName: "first",
      form: {
        user: "",
        password: "",
        password2: "",
        phone: "",
        email: "",
        name: "",
      },
      rules: {
        // 定义输入框验证规则
        name: [{ required: true, message: "昵称必填", trigger: "blur" }],
        user: [
          { required: true, message: "用户名必填", trigger: "blur" },
          { min: 6, max: 15, message: "长度要在6~15位之间", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码必填", trigger: "blur" },
          { min: 6, max: 15, message: "长度要在6~15位之间", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        password2: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: checkPassword2, trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 使elementUI中数据变为可修改
    handleClick(row) {
      if (row.isEdit) {
        this.$delete(row, "isEdit");
        console.log(row);
        const params = `id=${row.id}&name=${row.name}&account=${row.account}&password=${row.password}`;
        this.axios.put("/admin/admin_change", params).then((res) => {
          console.log(res);
        });
      } else {
        this.$set(row, "isEdit", true);
      }
      console.log(this.tableData);
    },
    handle(row, column, cell, event) {},
    // 删除用户
    deleteUser(index, row) {
      console.log(index, row);

      let _this = this;
      if (!(index + 1)) {
        _this.$message.error("用户有误，请刷新后重试");
        return;
      } else {
        _this
          .$confirm("确定要删除此用户吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(function () {
            let goodIndex = 0;
            _this.tableData.forEach((item, id) => {
              console.log(item, id);
              if (item.id === index + 1) {
                goodIndex = id;
                console.log(goodIndex);
              }
            });
            _this.tableData.splice(goodIndex, 1);
            const params = `${row.id}`;
            console.log("params", params);
            _this.axios.delete("/admin/" + params).then((res) => {
              console.log(res);
            });
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    register() {
      console.log(
        this.form.user,
        this.form.password,
        this.form.email,
        this.form.phone,
        this.form.name
      );
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const url = "/admin/register";
          const params = `account=${this.form.user}&name=${this.form.name}&password=${this.form.password}&email=${this.form.email}&phone=${this.form.phone}`;
          this.axios.post(url, params).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              alert("管理员注册成功!");
            } else {
              alert("用户名已存在");
            }
          });
        }
      });
    },
  },
  mounted() {
    // 获取用户信息显示到页面上
    this.axios.get("/admin/admin_detail").then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>